<template>
  <div
    :class="[
      'DFKeyboardInput',
      'input-keyboard',
      `DFKeyboardInput-style${style}`
    ]"
  >
    <div class="DFKeyboardInputView">
      <n-input
        v-if="virtualKeyboard"
        :placeholder="$t('common.form.plInput')"
        :class="inputClass"
        :value="inputValue"
        :maxlength="maxlength"
        :status="'success'"
        :readonly="true"
        :type="(type as any)"
        :size="'large'"
        :showPasswordOn="(showPasswordOn as any)"
        :precision="precision"
        @focus="focusInput"
        @input="inputFun"
        @blur="blurInput"
      >
        <template v-for="(_, slot) in $slots" #[slot]>
          <slot :name="slot"></slot>
        </template>
      </n-input>

      <n-input-number
        v-else-if="inputType === 'number'"
        :placeholder="$t('common.form.plInput')"
        :value="(value as any)"
        :precision="precision"
        @input="inputFun"
        @update:value="updateValueFn"
      >
        <template v-for="(_, slot) in $slots" #[slot]>
          <slot :name="slot"></slot>
        </template>
      </n-input-number>

      <n-input
        v-else
        :placeholder="$t('common.form.plInput')"
        :value="value"
        @input="inputFun"
        @update:value="updateValueFn"
      >
        <template v-for="(_, slot) in $slots" #[slot]>
          <slot :name="slot"></slot>
        </template>
      </n-input>
    </div>

    <SimpleKeyboard
      v-if="virtualKeyboard"
      :ref="keyboardClass"
      :keyboardClass="keyboardClass"
      :input="inputValue"
      :maxlength="maxlength"
      :inputType="inputType"
      :precision="precision"
      @onChange="onChange"
      @onKeyPress="onKeyPress"
    />
  </div>
</template>

<script lang="ts">
import SimpleKeyboard from '@/components/SimpleKeyboard/index.vue';
import { setValFn } from '@/utils/core';
import { useUserStore } from '@/store/modules/user';

export default {
  name: 'keyboard-input',
  // inject: ['styleType'],
  components: {
    SimpleKeyboard
  },
  props: {
    keyboardClass: {
      default: 'simple-keyboard'
    },
    field: String,
    value: {
      default: '',
    },
    inputClass: String,
    maxlength: Number,
    inputType: {
      default: 'text',
    },
    precision: {
      default: 2
    },
    type: {
      default: 'text',
      type:String
    },
    showPasswordOn: {
      default:'click'
    }
  },
  data() {
    return {
      input: null,
      inputEle: null
    };
  },
  mounted() {
    this.$nextTick(() => {

      this.inputEle = (this.$refs[this.keyboardClass as string] as any)?.$el;
    });
  },
  computed: {
    virtualKeyboard() {
      const userStore = useUserStore();

      return userStore.virtualKeyboard;
    },
    inputValue: {
      get() {
        // console.log(this.value);
        return this.value;
      },
      set(value) {
        this.$emit('update:value', value);
      }
    },
    style() {
      return 2;
    }
  },
  methods: {
    inputChange() {
      this.$emit('update:value');
    },
    inputFun(value) {
      this.$emit('update:value', setValFn(this.inputType, value,false,this.precision));
    },
    focusInput(e) {
      this.inputEle = e.srcElement;
      // 关闭所有keyboard
      let arr = document.querySelectorAll('.hg-theme-default');
      arr.forEach((ele: any) => {
        ele.style.visibility = 'hidden';
      });

      // 打开当前输入框的keyboard
      let currentKeyboard: any = this.$refs[this.keyboardClass as string];

      currentKeyboard.$el.style.visibility = 'visible';

      currentKeyboard.$el.setAttribute('focus', true);

      this.$emit('focus');
    },

    blurInput() {
      let currentKeyboard: any = this.$refs[this.keyboardClass as string];

      currentKeyboard.$el.removeAttribute('focus');

      // console.log(111)

      // if (this.inputValue && this.inputValue.charAt(this.inputValue.length - 1)==='.') {
      //   this.inputFun(this.inputValue.slice(0,this.inputValue.length-1))
      // }

      // this.$emit('blur');
    },

    onChange(input) {
      this.inputValue = setValFn(this.inputType, input,false,this.precision);
      // console.log(this.inputValue);
      // 解决当输入框为密码输入框时，切换显示/隐藏密码，光标在开头问题，注意：element-ui版本号需为2.15.2及以上
      (this.inputEle as any).focus();
    },
    onKeyPress(button) {
      // console.log('onKeyPress', button);
      if (button === '{enter}') {
        this.$emit('enterFn');
      }
    },
    updateValueFn(value) {
      this.$emit('update:value', value);
    }
  }
};
</script>

<style lang="less">
.hg-layout-default {
  visibility: hidden;
}

.DFKeyboardInputView {
  .n-input {
    font-size: 26px !important;
    margin-bottom: 10px;
    text-align: center;
    height: 60px;

    .n-input__input-el {
      height: 60px;
      padding: 0;
      font-size: 26px !important;
    }
  }
}
</style>
